<template>
  <div>
    <div style="margin-top:30px">
      <div class="casebtn">用例名称</div>
      <input v-model="search1" placeholder="Search" class="CaseSearch" />
      <el-button type="primary" @click="letsearch" class="searchBtn">搜索</el-button>
      <el-button type="primary" @click="redo" class="redoBtn">重置</el-button>
      <el-button type="primary" @click="refresh" class="redoBtn">刷新</el-button>
      <el-button type="primary" class="add1" @click="addData()">添加</el-button>
      <el-button type="info" class="export" @click="exportData()">导出</el-button>
      <!-- <el-button type="warning" class="import">导入</el-button> -->
      <el-button type="success" class="template" @click="downloadExcel()">导出模板</el-button>
      <el-button type="danger" class="delete" @click="batchDel()">批量删除</el-button>
    </div>
    <div style="height: 400px;">
      <el-table :data="tableData.filter(data => !search || data.caseName.toLowerCase().includes(search.toLowerCase()))"
        style="width: 1320px;line-height:40px;font-size:14px" max-height="400" @selection-change="handleSelectionChange">

        <el-table-column type="selection" class="tablerow">
        </el-table-column>
        <el-table-column label="序号" prop="number" class="tablerow">
        </el-table-column>
        <el-table-column label="用例名称" prop="caseName" class="tablerow">
        </el-table-column>
        <el-table-column label="项目名称" prop="proName" class="tablerow">
        </el-table-column>
        <el-table-column label="请求URL" prop="reqUrl" class="tablerow">
        </el-table-column>
        <el-table-column label="请求方法" prop="reqMethod" class="tablerow">
        </el-table-column>
        <el-table-column label="请求数据" prop="reqData" class="tablerow">
        </el-table-column>
        <el-table-column label="用例状态" prop="caseState" class="tablerow">
        </el-table-column> 
        <el-table-column text-align="right" label="操作">

          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.$index, scope.row)" size="small">Edit</el-button>
            <el-button type="danger" @click="handleDelete(scope.$index, scope.row), open2()"
              size="small">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 编辑抽屉 -->
    <el-drawer title="添加用例" :visible.sync="yadd" :direction="direction" style="font-size:20px;text-align:center">
      <div>
        <div class="drawerrow">用例名称 <el-input v-model="caseName" class="editform" /></div>
        <div class="drawerrow">项目名称 <el-input v-model="proName" class="editform" /></div>
        <div class="drawerrow">请求URL <el-input v-model="reqUrl" class="editform" /></div>
        <div class="drawerrow">请求方法 <el-select v-model="reqMethod" class="editform">
            <el-option label="get" value="get"></el-option>
            <el-option label="post" value="post"></el-option>
          </el-select>
        </div>
        <div class="drawerrow">请求数据 <el-input v-model="reqData" class="editform" /></div>
        <div class="drawerrow">用例状态 <el-select v-model="caseState" class="editform">
            <el-option label="成功" value="成功"></el-option>
            <el-option label="失败" value="失败"></el-option>
            <el-option label="未执行" value="未执行"></el-option>
          </el-select>
        </div>
        <el-button type="success" class="drawerbtn" @click="confirmAdd">确认</el-button>
      </div>
    </el-drawer>
    <!-- 编辑抽屉 -->
    <el-drawer title="编辑用例" :visible.sync="drawer" :direction="direction" style="font-size:20px;text-align:center">
      <div>
        <div class="drawerrow">用例名称 <el-input v-model="caseName" class="editform" /></div>
        <div class="drawerrow">项目名称 <el-input v-model="proName" class="editform" /></div>
        <div class="drawerrow">请求URL <el-input v-model="reqUrl" class="editform" /></div>
        <div class="drawerrow">请求方法 <el-select v-model="reqMethod" class="editform">
            <el-option label="get" value="get"></el-option>
            <el-option label="post" value="post"></el-option>
          </el-select>
        </div>
        <div class="drawerrow">请求数据 <el-input v-model="reqData" class="editform" /></div>
        <div class="drawerrow">用例状态 <el-select v-model="caseState" class="editform">
            <el-option label="成功" value="成功"></el-option>
            <el-option label="失败" value="失败"></el-option>
            <el-option label="未执行" value="未执行"></el-option>
          </el-select>
        </div>
        <el-button type="info" class="drawerbtn" @click="drawercancel">取消编辑</el-button>
        <el-button type="success" class="drawerbtn" @click="confirmEdit">确认更改</el-button>
      </div>
    </el-drawer>
    <!-- 页数 -->
    <div class="page1">
      <el-pagination background layout="prev, pager, next" :total="1000" @current-change="currentchange">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        
      ],
      search: '',
      yadd: false,
      drawer: false,
      direction: 'rtl',
      number: '',
      caseName: '',
      proName: '',
      reqUrl: '',
      reqMethod: '',
      reqData: '',
      caseState: '',
      editIndex: '',
      multipleSelection: [],
      search1: ''



    }
  },
  methods: {
    letsearch() {
      this.search = this.search1;
    },
    redo() {
      this.search = ''
    },
    refresh(){
      this.$axios
          .get('/testcase/list/all')
          .then(successResponse => {
            console.log(successResponse.data.data);
            // console.log(successResponse.data.code+"////////");
            var cases = Array.prototype.slice.call(successResponse.data.data);
            console.log(cases);
            console.log(cases.length)
            this.tableData.length = 0;
              for(var i = 0; i < cases.length; i++){
                console.log(i);
                let obj = {};
                obj.number = i+1;
                obj.id = cases[i].id;
                obj.caseName = cases[i].casename;
                obj.proName = cases[i].projectname;
                obj.reqUrl = cases[i].url;
                obj.reqMethod = cases[i].method;
                obj.reqData = cases[i].requestdata;
                obj.caseState = cases[i].state;
                this.tableData.push(obj);
              }
            console.log(this.tableData);
      
          })
          .catch(failResponse => {
            // console.log(failResponse.data.code);
            console.log(failResponse);
          })
    },
    handleEdit(i, row) {
      this.drawer = true;
      this.number = this.tableData[i].number;
      this.caseName = this.tableData[i].caseName;
      this.proName = this.tableData[i].proName;
      this.reqUrl = this.tableData[i].reqUrl;
      this.reqMethod = this.tableData[i].reqMethod;
      this.reqData = this.tableData[i].reqData;
      this.caseState = this.tableData[i].caseState;
      this.editIndex = i;
    },
    currentchange(val) {

      console.log(val)
    },
    addData() {
      this.yadd = true;
      this.number = this.tableData.length+1;
      this.caseName = "";
      this.proName = "";
      this.reqUrl = "";
      this.reqMethod = "";
      this.reqData = "";
      this.caseState = "";
    },
    confirmAdd(){
      
      this.$axios
          .post('/testcase/add',{
            casename: this.caseName,
            projectname: this.proName,
            url: this.reqUrl,
            method: this.reqMethod,
            requestdata: this.reqData,
            state: this.caseState
          }).then(successResponse => {
            this.refresh();
            this.yadd=false;
            console.log(successResponse);
          }).catch(failResponse => {
            console.log(failResponse);
          })

    },
    handleDelete(index, row) {
      console.log(index, row);

      this.$axios.post("testcase/delete",{
        id: this.tableData[index].id
      }).then(successResponse => {
        this.refresh();
        console.log(successResponse);
      }).catch(failResponse => {
        console.log(failResponse);
      })
      
      this.tableData.splice(index,1);
      // this.tableData.splice(index, 1)
    },
    drawercancel() {
      this.drawer = false;
    },
    confirmEdit() {
      let i = this.editIndex;
      this.tableData[i].number = this.number;
      this.tableData[i].caseName = this.caseName;
      this.tableData[i].proName = this.proName;
      this.tableData[i].reqUrl = this.reqUrl;
      this.tableData[i].reqMethod = this.reqMethod;
      this.tableData[i].reqData = this.reqData;
      this.tableData[i].caseState = this.caseState;
      this.drawer = false;
      this.$axios.post("testcase/update",{
            id: this.tableData[i].id,
            casename: this.caseName,
            projectname: this.proName,
            url: this.reqUrl,
            method: this.reqMethod,
            requestdata: this.reqData,
            state: this.caseState
      }).then(successResponse => {
          console.log(successResponse);
      }).catch(failResponse => {
          console.log(failResponse);
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    batchDel() {
      this.$confirm('此操作将批量删除用例, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let val = this.multipleSelection     //选中的值
        var finish = false;
        if (val) {
          val.forEach((val, index) => {
            this.tableData.forEach((v, i) => {
              if (val.number === v.number) {
                this.tableData.splice(i, 1)
                this.$axios.post("testcase/delete",{
                  id: v.id,
                  }).then(successResponse => {
                    if(finish == true){
                      this.refresh();
                    }
                    console.log(successResponse);
                  }).catch(failResponse => {
                    console.log(failResponse);
                  })
      

              }
            })
          })
          finish = true;
        }
        this.$message.success("删除成功")
      })
    },
    downloadExcel() {
      this.exportExcel();
      let obj = {};
      obj.number = "";
      obj.caseName = "";
      obj.proName = "";
      obj.reqUrl = "";
      obj.reqMethod = "";
      obj.reqData = "";
      obj.caseState = "";
      let excelData = [];
      excelData.push(obj);
      this.excelData = excelData; 
    },
    exportExcel() {
      var that = this;
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require("@/assets/excel/Export2Excel");
        //这里使用绝对路径( @表示src文件夹 )，使用@/+存放export2Excel的路径【也可以写成相对于你当前"xxx.vue"文件的相对路径，例如我的页面放在assets文件夹同级下的views文件夹下的“home.vue”里，那这里路径也可以写成"../assets/excel/Export2Excel"】
        const tHeader = ["序号", "用例名称", "项目名称", "请求URL", "请求方法", "请求数据", "用例状态"]; // 导出的excel表头名信息
        const filterVal = [
          "number",
          "caseName",
          "proName",
          "reqUrl",
          "reqMethod",
          "reqData",
          "caseState",
        ]; // 导出的excel表头字段名，需要导出表格字段名
        const list = that.excelData;
        const data = that.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "模板导出"); // 导出的表格名称，根据需要自己命名
      });
    },

    exportData() {
      this.excelData = this.tableData;  //将你要导出的数组数据（historyList）赋值给excelDate
      this.export2Excel(); //调用export2Excel函数，填写表头（clomns里的type）和对应字段(historyList里的属性名)
    },
    //表格数据写入excel
    export2Excel() {
      var that = this;
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require("@/assets/excel/Export2Excel");
        //这里使用绝对路径( @表示src文件夹 )，使用@/+存放export2Excel的路径【也可以写成相对于你当前"xxx.vue"文件的相对路径，例如我的页面放在assets文件夹同级下的views文件夹下的“home.vue”里，那这里路径也可以写成"../assets/excel/Export2Excel"】
        const tHeader = ["序号", "用例名称", "项目名称", "请求URL", "请求方法", "请求数据", "用例状态"]; // 导出的excel表头名信息
        const filterVal = [
          "number",
          "caseName",
          "proName",
          "reqUrl",
          "reqMethod",
          "reqData",
          "caseState",
        ]; // 导出的excel表头字段名，需要导出表格字段名
        const list = that.excelData;
        const data = that.formatJson(filterVal, list);

        export_json_to_excel(tHeader, data, "用例汇总"); // 导出的表格名称，根据需要自己命名
      });
    },
    //格式转换，直接复制即可,不需要修改什么
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    }




  },
}
</script>
<style>
.casebtn {
  width: 100px;
  border: 0px;
  height: 34px;
  background-color: #94D8F6;
  font-size: 14px;
  margin-left: 50px;
  float: left;
  text-align: center;
  line-height: 34px;

}

.CaseSearch {
  height: 35px;
  width: 300px;
  font-size: 14px;
  float: left;
  margin-left: 5px;
  padding-left: 5px
}

.searchBtn {
  height: 35px;
  width: 80px;
  font-size: 10px;
  margin-left: 10px;

}

.redoBtn {
  height: 35px;
  width: 80px;
  font-size: 10px;
  /* margin-left: 10px;
  margin-right: 160px; */
}

.export {
  height: 40px;
  width: 80px;
  font-size: 15px;

}
.add1 {
  height: 40px;
  width: 80px;
  font-size: 15px;

}

.import {
  height: 40px;
  width: 80px;
  font-size: 15px;
  margin-left: 20px;
}

.template {
  height: 40px;
  width: 100px;
  font-size: 15px;
  margin-left: 20px;
}

.delete {
  height: 40px;
  width: 100px;
  font-size: 15px;
  margin-right: 10px;
}


.tablerow {
  height: 20px;
  font-size: 45px;
  line-height: 25px;
}

.drawerrow {
  height: 40px;
  margin-left: 20px;
  line-height: 40px;
  font-size: 15px;
  margin-top: 20px
}

.editform {
  margin-left: 30px;
  height: 35px;
  width: 200px;
  font-size: 15px;

}

.drawerbtn {
  margin-top: 30px;
  width: 100px;
  height: 40px;
  font-size: 16px;
}

.page1 {
  width: 500px;
  height: 50px;
  align-content: center;
  margin-left: 400px;
  margin-top: 76px;


}
</style>